<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery 2.2.2.js"></script>
		<script src="js/jquery-ui.min.js"></script>
		<script src="js/jsPlumb-2.0.7-min.js"></script>
		<script src="js/shishi.js"></script>
		<link rel="stylesheet" href="css/jquery-ui.min.css" />
		<script src="js/Math.uuid.js"></script>
		<style type="text/css">
			p {
				margin: 0;
				padding: 0;
			}
			
			.node {
				box-shadow: 2px 2px 19px #aaa;
				-o-box-shadow: 2px 2px 19px #aaa;
				-webkit-box-shadow: 2px 2px 19px #aaa;
				-moz-box-shadow: 2px 2px 19px #aaa;
				-moz-border-radius: 0.5em;
				border-radius: 0.5em;
				opacity: 0.8;
				filter: alpha(opacity=80);
				border: 1px solid #346789;
				width: 70px;
				text-align: center;
				z-index: 20;
				position: absolute;
				background-color: #eeeeef;
				color: black;
				padding: 10px;
				font-size: 9pt;
				cursor: pointer;
				height: 30px;
				line-height: 30px;
			}
		/*	.diamond{
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-webkit-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				height:100px;
				width:100px;
			}
		*/	
			.node_1 {
				left: 50px;
				top: 5px;
			}
			
			.node_2 {
				top: 80px;left: 50px;
			}
			
			.node_3 {
				top: 160px;left: 50px;
			}
			
			.node_4 {
				top: 240px;left: 50px;
			}
			
			.radius {
				border-radius: 25em;
			}
			
			.node:hover {
				box-shadow: 2px 2px 19px #444;
				-o-box-shadow: 2px 2px 19px #444;
				-webkit-box-shadow: 2px 2px 19px #444;
				-moz-box-shadow: 2px 2px 19px #444;
				opacity: 0.8;
				filter: alpha(opacity=80);
			}
			
			#left {
				position: absolute;
				width: 200px;
				height: 500px;
				border: solid 1px;
			}
			
			#centerContainer {
				position: absolute;
				left: 210px;
			}
			
			#right {
				position: absolute;
				width: 1300px;
				height: 800px;
				border: solid 1px;
			}
			
			#save {
				position: absolute;
				left: 1510px;
			}
			#load {
				position: absolute;
				left: 1510px;
				top:40px;
			}
			
			.jsplumb-overlay {
				z-index: 20;
				background-color: white;
				cursor: pointer;
			}
			.jsplumb-endpoint{
				z-index: 100;
			}
		</style>
	</head>

	<body>
		<div id="left">
			<div class="node radius node_1" id="node1">开始</div>
			<div class="node node_2" id="node2">判断</div>
			<div class="node node_3 diamond" id="node3">流程</div>
			<div class="node node_4 radius" id="node4">结束</div>
		</div>
		<div id="centerContainer">
			<p>拖拉到此区域</p>
			<div id="right">
			
			</div>
		</div>

		<div id="save">
			<input type="button" value="保存" onclick="save()" />
		</div>
		<div id="load">
			<input type="button" value="导入" onclick="load()" />
		</div>
	</body>

</html>